<!--
 * @Author: Soulmate
 * @Date: 2023-09-14 11:07:46
 * @LastEditTime: 2023-09-19 10:47:59
 * @LastEditors: Soulmate
 * @Description: 
 * @FilePath: \ruoyi-ui-vue3\src\views\index\workspace\index.vue
 * 版权声明
-->
<template>
    <div class="app-container">
        <el-row>
            <el-col :span="24" :xs="24">
                <el-card class="box-card">
                    <div class="header">
                        <div class="lf-header flex">
                            <div class="avatar"><el-avatar :size="80" :src="userStore.avatar" /></div>
                            <div class="welcome">
                                <h3>早安，{{ userStore.name }}，开始您的一天工作吧！</h3>
                                <p>
                                    <el-icon style="vertical-align: middle; margin-right: 2px" size="20"><MostlyCloudy /></el-icon>今日晴转多云，18°C ~
                                    22°C，出门记得穿外套哦~
                                </p>
                            </div>
                        </div>
                        <div class="rg-header flex">
                            <div class="rowTemp">
                                <div class="title"><el-button plain type="primary" icon="Grid" size="small" circle />项目数</div>
                                <div class="num"><countTo :end="200" :autoPlay="true" :duration="1200" /></div>
                            </div>
                            <div class="rowTemp">
                                <div class="title"><el-button plain type="warning" icon="EditPen" size="small" circle />待办项</div>
                                <div class="num">
                                    <el-statistic :value="5">
                                        <template #suffix> / 18</template>
                                    </el-statistic>
                                </div>
                            </div>
                            <div class="rowTemp">
                                <div class="title"><el-button plain type="success" icon="ChatLineRound" size="small" circle />消息</div>
                                <div class="num"><countTo :end="1659" :autoPlay="true" :duration="1200" /></div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :span="3" :xs="6">
                <el-card class="box-card">
                    <div class="cardTemp">
                        <div class="title">
                            <svg-icon class="svg-icon" class-name="userPc" icon-class="userPc" />
                        </div>
                        <div class="num">用户管理</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="3" :xs="6">
                <el-card class="box-card">
                    <div class="cardTemp">
                        <div class="title">
                            <svg-icon class="svg-icon" class-name="rolePc" icon-class="rolePc" />
                        </div>
                        <div class="num">角色管理</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="3" :xs="6">
                <el-card class="box-card">
                    <div class="cardTemp">
                        <div class="title">
                            <svg-icon class="svg-icon" class-name="deptPc" icon-class="deptPc" />
                        </div>
                        <div class="num">部门管理</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="3" :xs="6">
                <el-card class="box-card">
                    <div class="cardTemp">
                        <div class="title">
                            <svg-icon class="svg-icon" class-name="menuPc" icon-class="menuPc" />
                        </div>
                        <div class="num">菜单管理</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="3" :xs="6">
                <el-card class="box-card">
                    <div class="cardTemp">
                        <div class="title">
                            <svg-icon class="svg-icon" class-name="dictPc" icon-class="dictPc" />
                        </div>
                        <div class="num">字典管理</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="3" :xs="6">
                <el-card class="box-card">
                    <div class="cardTemp">
                        <div class="title">
                            <svg-icon class="svg-icon" class-name="dataPc" icon-class="dataPc" />
                        </div>
                        <div class="num">趋势管理</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="3" :xs="6">
                <el-card class="box-card">
                    <div class="cardTemp">
                        <div class="title">
                            <svg-icon class="svg-icon" class-name="letterPc" icon-class="letterPc" />
                        </div>
                        <div class="num">通知管理</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="3" :xs="6">
                <el-card class="box-card">
                    <div class="cardTemp">
                        <div class="title">
                            <svg-icon class="svg-icon" class-name="noisePc" icon-class="noisePc" />
                        </div>
                        <div class="num">消息管理</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="15" class="main">
            <el-col :span="8" :xs="24">
                <el-card class="box-card">
                    <template v-slot:header>
                        <div class="clearfix">
                            <span>版本更新</span>
                        </div>
                    </template>
                    <div class="timeLine content-box">
                        <el-timeline>
                            <el-timeline-item
                                placement="top"
                                :type="index == 1 ? 'primary' : ''"
                                size="normal"
                                :hollow="index == 1 ? true : false"
                                v-for="(activity, index) in versionData"
                                :key="index"
                                :timestamp="activity.timestamp"
                            >
                                {{ activity.content }}
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8" :xs="24">
                <el-card class="box-card">
                    <template v-slot:header>
                        <div class="clearfix">
                            <span>我的任务</span>
                        </div>
                    </template>
                    <div class="taskContent content-box">
                        <el-table class="sortTable" row-key="id" :data="taskData" style="width: 100%">
                            <el-table-column align="center" type="index" label="">
                                <template #default="">
                                    <svg-icon class="drag_btn" style="font-size: 18px; cursor: pointer" class-name="drawp" icon-class="drawp" />
                                </template>
                            </el-table-column>
                            <el-table-column align="center" type="index" label="优先级" width="100">
                                <template #default="scope">
                                    <el-button style="width: 25px; height: 25px" :color="scope.row.levelColor" plain circle>{{ scope.$index + 1 }}</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="taskName" label="任务名称" width="180" />
                            <el-table-column align="center" prop="taskStatus" label="状态">
                                <template #default="scope">
                                    <p :style="`color: ${scope.row.taskStatus == 1 ? '#909399' : scope.row.taskStatus == 2 ? '#E6A23C' : '#67C23A'};`">
                                        {{ scope.row.taskStatus == 1 ? '未开始' : scope.row.taskStatus == 2 ? '进行中' : '已完成' }}
                                    </p>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8" :xs="24">
                <el-card class="box-card">
                    <template v-slot:header>
                        <div class="clearfix">
                            <span>本月目标</span>
                        </div>
                    </template>
                    <div class="progress content-box">
                        <el-progress type="dashboard" :status="programShow['status']" :stroke-width="10" :percentage="duringNum" class="con" :width="220">
                            <template #default="{ percentage }">
                                <svg-icon style="font-size: 60px; cursor: pointer" class-name="jb" icon-class="jb" />
                                <span class="percentage-label">{{ programShow['text'] }}</span>
                                <span class="percentage-value">{{ percentage }}%</span>
                            </template>
                        </el-progress>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="15" class="main">
            <el-col :span="16" :xs="24">
                <el-card class="box-card">
                    <template v-slot:header>
                        <div class="clearfix">
                            <span>项目进度</span>
                        </div>
                    </template>
                    <div class="taskContent content-box">
                        <el-table class="sortTable" row-key="id" :data="programData" style="width: 100%">
                            <el-table-column align="center" type="index" label="" />
                            <el-table-column align="center" prop="name" label="项目名称" width="200" />
                            <el-table-column align="center" prop="startTime" label="开始时间" />
                            <el-table-column align="center" prop="endTime" label="结束时间" />
                            <el-table-column align="center" prop="status" label="状态">
                                <template #default="scope">
                                    <p :style="`color: ${scope.row.taskStatus == 1 ? '#909399' : scope.row.taskStatus == 2 ? '#E6A23C' : '#67C23A'};`">
                                        {{ scope.row.taskStatus == 1 ? '未开始' : scope.row.taskStatus == 2 ? '进行中' : '已完成' }}
                                    </p>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="progress" label="进度">
                                <template #default="scope">
                                    <el-progress :color="scope.row.progressColor" :percentage="scope.row.progress" :stroke-width="6" striped />
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8" :xs="24">
                <el-card class="box-card">
                    <template v-slot:header>
                        <div class="clearfix">
                            <span>小组成员</span>
                        </div>
                    </template>
                    <div class="team content-box">
                        <div class="teamRow" v-for="(item, index) in teamData" :key="index">
                            <div class="avatar"><el-avatar :size="45" :src="item.avatar" /></div>
                            <div class="info">
                                <h3>@{{ item.name }}</h3>
                                <p>{{ item.desc }}</p>
                            </div>
                            <div class="status">
                                <el-tag class="ml-2" v-if="item.status == 1" type="success">在线</el-tag>
                                <el-tag class="ml-2" v-else type="info">离线</el-tag>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup name="Index">
import Mock from 'mockjs';
import { easyHookData } from './hook';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();

const {
    taskData,
    teamData,
    duringNum,
    duringToNum,
    versionData,
    programData,
    programShow,
    getVersionList,
    getTaskList,
    getProgramList,
    getTeamList,
    sortTable,
} = easyHookData();

onMounted(() => {
    getVersionList();
    getTaskList();
    getProgramList();
    getTeamList();

    // 设置随机值
    setTimeout(() => {
        duringToNum.value = Mock.mock('@integer(20, 100)');
    });

    nextTick(() => {
        sortTable();
    });
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
.app-container {
    padding: 15px;
    .box-card {
        margin-bottom: 15px;

        ::v-deep(.el-card__body) {
            padding-bottom: 15px !important;
        }
    }
    .header {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .flex {
            display: flex;
        }
        .lf-header {
            width: 50%;
            align-items: center;
            .avatar {
                margin-right: 10px;
                cursor: pointer;
            }
            .welcome {
                flex: 1;

                h3,
                p {
                    width: 100%;
                    margin: 0px;
                }

                h3 {
                    line-height: 40px;
                    font-size: 18px;
                }

                p {
                    line-height: 30px;
                    font-size: 14px;
                    color: $--color-less;
                    vertical-align: middle;
                }
            }
        }
        .rg-header {
            .rowTemp {
                margin-right: 10px;
                display: flex;
                flex-wrap: wrap;
                justify-items: right;
                align-content: center;

                .title,
                .num {
                    width: 100%;
                    text-align: right;
                    cursor: pointer;
                    ::v-deep(.el-button) {
                        margin-right: 5px;
                    }
                }
                .title {
                    font-size: 14px;
                    height: 40px;
                    line-height: 40px;
                }
                .num {
                    font-size: 20px;
                    font-weight: 500;
                    height: 30px;
                    line-height: 30px;
                }
            }
        }
    }
    .cardTemp {
        margin-right: 10px;
        display: flex;
        flex-wrap: wrap;

        .title,
        .num {
            width: 100%;
            text-align: center;
            cursor: pointer;
        }
        .title {
            font-size: 14px;
            height: 40px;
            line-height: 40px;
            .svg-icon {
                font-size: 40px;
            }
        }
        .num {
            font-size: 14px;
            font-weight: 500;
            height: 30px;
            line-height: 40px;
        }
    }
    .main {
        .box-card {
            ::v-deep(.clearfix) {
                span {
                    font-size: 15px;
                }
            }
            .content-box {
                height: 250px;
                overflow-y: scroll;
            }
            .timeLine {
                width: 100%;
                ::v-deep(.el-timeline) {
                    padding: 10px 0px 0px 70px;
                    box-sizing: border-box;
                    .el-timeline-item__timestamp {
                        &.is-top {
                            margin: 0;
                            position: absolute;
                            top: 0px;
                            left: -65px;
                            font-style: italic;
                        }
                    }
                    .el-timeline-item__node {
                        &.is-hollow {
                            border-width: 3px;
                        }
                    }
                }
            }

            .progress {
                display: flex;
                justify-content: center;
                align-items: center;

                ::v-deep(.con) {
                    .percentage-value {
                        display: block;
                        margin-top: 10px;
                        font-size: 28px;
                    }
                    .percentage-label {
                        display: block;
                        margin-top: 10px;
                        font-size: 14px;
                    }
                    .demo-progress .el-progress--line {
                        margin-bottom: 15px;
                        width: 350px;
                    }
                    .demo-progress .el-progress--circle {
                        margin-right: 15px;
                    }
                }
            }

            .team {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                .teamRow {
                    width: 100%;
                    display: flex;
                    height: 50px;
                    margin-bottom: 10px;
                    .avatar {
                        width: 60px;
                        display: flex;
                        align-items: center;
                    }
                    .info {
                        flex: 1;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        align-content: baseline;
                        h3,
                        p {
                            margin: 0px;
                            line-height: 25px;
                            width: 100%;
                        }
                        h3 {
                            font-size: 16px;
                        }
                        p {
                            font-size: 14px;
                        }
                    }
                    .status {
                        width: 70px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }
}
// 兼容手机端
.mobile {
    .app-container {
        .header {
            flex-wrap: wrap;
            .lf-header {
                width: 100%;
                .welcome {
                    h3 {
                        font-size: 16px;
                    }
                }
            }
        }
        .box-card {
            .cardTemp {
                margin: 0px;
            }

            .team {
                .teamRow {
                    .info {
                        p {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 200px;
                        }
                    }
                }
            }
        }
    }
}
</style>
